<template>
	<div class="login-container">
		<div class="login-box" v-if="loginShow">
			<span class="line"></span>
			<div class="login-top">
				<p class="login-title">经济运行态势一张图</p>
				<p class="login-subhead" style="color: #5aa1fc">欢迎登录!</p>
			</div>
			<!--<div class="login-menu">-->
				<!--<el-button href="#" @click.stop="activeName='user'">账号密码登录</el-button>-->
				<!--<el-button href="#" @click.stop="activeName='third'">第三方系统登录</el-button>-->
			<!--</div>-->
			<userLogin v-if="activeName==='user'"></userLogin>
			<thirdLogin v-if="activeName==='third'"></thirdLogin>
		</div>
	</div>
</template>

<script>
import userLogin from "./userLogin";
import thirdLogin from "./thirdlogin";
import {validatenull} from "@/util/validate";
import {getQueryString, getTopUrl} from "@/util/util";

export default {
	components: {
		userLogin,
		thirdLogin,
	},
	data() {
		return {
			activeName: 'user',
      loginShow:true,
			socialForm: {
				tenantId: "000000",
				source: "",
				code: "",
				state: "",
			}
		};
	},
	watch: {
		$route() {
			this.handleLogin();
		}
	},
	created() {
		this.handleLogin();
	},
	methods: {
		handleLogin() {
			const topUrl = getTopUrl();
			const redirectUrl = "/oauth/redirect/";
			this.socialForm.source = getQueryString("source") || "source";
			this.socialForm.code = getQueryString("code");
			this.socialForm.state = getQueryString("state") || "state";
			if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
				let source = topUrl.split("?")[0];
				source = source.split(redirectUrl)[1];
				this.socialForm.source = source;
			}
			if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
				this.loginShow=false;
        const loading = this.$loading({
					lock: true,
					text: '数据加载中',
					spinner: "el-icon-loading"
				});
				this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
					window.location.href = topUrl.split(redirectUrl)[0];
					this.$router.push({path: "/"});
					loading.close();
				}).catch(() => {
					loading.close();
				});
			}
		}
	},
};
</script>
<style lang="scss" scoped>
.login-container {
	background: url("./img/login-background.png");
	background-size: cover;
	height: 100%;
	width: 100%;

	.login-top {
		position: absolute;
		left: 50%;
		top: -27%;
		transform: translate(-50%, -50%);
		width: 600px;
		color: #ffffff;
		font-size: 2vw;
		text-align: center;

		.login-title {
			font-weight: 600;
			margin-bottom: 0px;
			background: linear-gradient(0deg, #87CEFF 0%, #E4F6FF 100%);
			// background-image: -webkit-linear-gradient(bottom, #9fe2ff, #5da4fc);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.login-subhead {
			margin-top: 15px;
			font-size: 1.5vw
		}
	}

	.login-box {
		width: 32vw;
		height: 40vh;
		background: rgba(0, 35, 104, .4);
		border-radius: 3px;
		background-size: cover;
		position: absolute;
		left: 50%;
		top: 58%;
		transform: translate(-50%, -50%);
		box-shadow: 0px 0px 3px black;

		/deep/ .el-input__inner {
			height: 0;
			line-height: 5.7vh;
			padding: 2vh 0;
			background-clip: content-box;
		}

		/deep/ input.el-input__inner::first-line {
			color: #fff;
			font-size: 0.9vw;


		}

		.login_form {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			position: absolute;
			bottom: 2.5vh;
			color: #fff;

			.login-input {
				width: 21vw;
				height: 5.7vh;
				line-height: 5.7vh;
				background: rgba(0, 0, 0, .3);
				border: 1px solid #3E5576;
				box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.35);
				border-radius: 3px;
				padding-left: 2.5vw;
				box-sizing: border-box;
				margin-top: 2vh;
				font-size: 0.87vw;
			}

			input:-webkit-autofill {
				-webkit-text-fill-color: #FFF
			}
		}

		.btn-box {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.login-btn {
				color: #fff;
				width: 21vw;
				height: 5.6vh;
				background: rgba(9, 59, 129, .7);
				border-radius: 3px;
				border: 0;
				font-size: 0.98vw;
				font-family: Microsoft YaHei;
				margin-top: 2vh;
				box-shadow: 0px 1px 9px #011d59;
			}
		}

		.login-boxbg {
			z-index: -1;
			position: absolute;
			top: -24px;
			left: -15px;

		}
	}

	.line {
		width: 32vw;
		height: 2px;
		display: block;
		position: absolute;
		left: 50%;
		top: 0%;
		transform: translate(-50%, -50%);
		background: linear-gradient(
				to right,
				rgba(0, 0, 0, .3) 0%,
				rgba(0, 0, 0, .3) 10%,
				rgba(20, 114, 202, 0.7) 20%,
				rgba(34, 145, 211, 0.7) 40%,
				rgba(255, 255, 255, 1) 50%,
				rgba(34, 145, 211, 0.7) 60%,
				rgba(20, 114, 202, 0.7) 80%,
				rgba(0, 0, 0, .3) 90%,
				rgba(0, 0, 0, .3) 100%)
	}

	/deep/ {
		.el-form-item__content {
			line-height: 5.7vh;
		}
	}

	/deep/ {
		.el-input__inner {
			line-height: 5.7vh;
			border: 0;
			background: none;
		}
	}
}
</style>
<style lang="scss">
.login-container {
	/*消除chrome自动填充时的input样式*/
	input.el-input__inner {
		height: 0;
		padding: 20px 0;
		background-clip: content-box;
	}

	input.el-input__inner::first-line {
		color: #fff
	}
}
</style>
